
 <!DOCTYPE HTML>
<html >
<head>
  <meta charset="UTF-8">
  
    <title>clipboard.js | Dreams are the power of change</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    
    <meta name="author" content="John Doe">
    

    
    <meta name="description" content="原生js实现复制12345678910111213141516171819202122232425262728&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;	&amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;gt;	&amp;lt;title&amp;gt;copy&amp;lt;/title&amp;gt;&amp;lt;/head&amp;gt;&amp;lt;body&amp;gt;&amp;lt;">
<meta property="og:type" content="article">
<meta property="og:title" content="clipboard.js">
<meta property="og:url" content="http://yoursite.com/2018/01/15/clipboard/index.html">
<meta property="og:site_name" content="Dreams are the power of change">
<meta property="og:description" content="原生js实现复制12345678910111213141516171819202122232425262728&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;	&amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;gt;	&amp;lt;title&amp;gt;copy&amp;lt;/title&amp;gt;&amp;lt;/head&amp;gt;&amp;lt;body&amp;gt;&amp;lt;">
<meta property="og:updated_time" content="2018-01-15T15:12:03.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="clipboard.js">
<meta name="twitter:description" content="原生js实现复制12345678910111213141516171819202122232425262728&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;	&amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;gt;	&amp;lt;title&amp;gt;copy&amp;lt;/title&amp;gt;&amp;lt;/head&amp;gt;&amp;lt;body&amp;gt;&amp;lt;">

    
    <link rel="alternative" href="/atom.xml" title="Dreams are the power of change" type="application/atom+xml">
    
    
    <link rel="icon" href="/img/jie.ico">
    
    
    <link rel="apple-touch-icon" href="/img/jacman.jpg">
    <link rel="apple-touch-icon-precomposed" href="/img/jacman.jpg">
    
    <link rel="stylesheet" href="/css/style.css">
</head>

  <body>
    <header>
      
<div>
		
			<div id="imglogo">
				<a href="/"><img src="/img/logo_03.jpg" alt="Dreams are the power of change" title="Dreams are the power of change"/></a>
			</div>
			
			<div id="textlogo">
				<h1 class="site-name"><a href="/" title="Dreams are the power of change">Dreams are the power of change</a></h1>
				<h2 class="blog-motto"></h2>
			</div>
			<div class="navbar"><a class="navbutton navmobile" href="#" title="Menu">
			</a></div>
			<nav class="animated">
				<ul>
					<ul>
					 
						<li><a href="/">主页</a></li>
					
						<li><a href="/archives">归档</a></li>
					
						<li><a href="/about">关于</a></li>
					
					<li>
 					
					<form class="search" action="//google.com/search" method="get" accept-charset="utf-8">
						<label>Search</label>
						<input type="search" id="search" name="q" autocomplete="off" maxlength="20" placeholder="Search" />
						<input type="hidden" name="q" value="site:yoursite.com">
					</form>
					
					</li>
				</ul>
			</nav>			
</div>
    </header>
    <div id="container">
      <div id="main" class="post" itemscope itemprop="blogPost">
  
	<article itemprop="articleBody"> 
		<header class="article-info clearfix">
  <h1 itemprop="name">
    
      <a href="/2018/01/15/clipboard/" title="clipboard.js" itemprop="url">clipboard.js</a>
  </h1>
  <p class="article-author">By
       
		<a href="/about" title="John Doe" target="_blank" itemprop="author">John Doe</a>
		
  <p class="article-time">
    <time datetime="2018-01-15T10:02:39.000Z" itemprop="datePublished"> Published 2018-01-15</time>
    
  </p>
</header>
	<div class="article-content">
		
		<div id="toc" class="toc-article">
			<strong class="toc-title">Contents</strong>
		
			<ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#原生js实现复制"><span class="toc-number">1.</span> <span class="toc-text">原生js实现复制</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#clipboard-js实现复制"><span class="toc-number">2.</span> <span class="toc-text">clipboard.js实现复制</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#为什么要是用clipboard-js"><span class="toc-number">2.0.1.</span> <span class="toc-text">为什么要是用clipboard.js</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#install"><span class="toc-number">2.0.2.</span> <span class="toc-text">install</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#创建"><span class="toc-number">2.0.3.</span> <span class="toc-text">创建</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#用法"><span class="toc-number">2.0.4.</span> <span class="toc-text">用法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#高级用法"><span class="toc-number">2.0.5.</span> <span class="toc-text">高级用法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#参考链接"><span class="toc-number">2.0.6.</span> <span class="toc-text">参考链接</span></a></li></ol></li></ol></li></ol>
		
		</div>
		
		<h2 id="原生js实现复制"><a href="#原生js实现复制" class="headerlink" title="原生js实现复制"></a>原生js实现复制</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">	&lt;meta charset=&quot;utf-8&quot;&gt;</span><br><span class="line">	&lt;title&gt;copy&lt;/title&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">&lt;span id=&apos;copy&apos;&gt;复制哈哈哈哈啊哈哈&lt;/span&gt;</span><br><span class="line">&lt;button id=&apos;btn&apos;&gt;复制&lt;/button&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;script type=&quot;text/javascript&quot;&gt;</span><br><span class="line">	function copyText()</span><br><span class="line">	&#123;</span><br><span class="line">		var Url2=document.getElementById(&quot;copy&quot;).innerText;</span><br><span class="line">        var oInput = document.createElement(&apos;input&apos;);</span><br><span class="line">        oInput.value = Url2;</span><br><span class="line">        document.body.appendChild(oInput);</span><br><span class="line">        oInput.select(); // 选择对象</span><br><span class="line">        document.execCommand(&quot;Copy&quot;); // 执行浏览器复制命令</span><br><span class="line">        oInput.className = &apos;oInput&apos;;</span><br><span class="line">        oInput.style.display=&apos;none&apos;;</span><br><span class="line">        alert(&apos;复制成功&apos;);</span><br><span class="line">	&#125;</span><br><span class="line">	document.getElementById(&apos;btn&apos;).onclick = function() &#123;</span><br><span class="line">		copyText()</span><br><span class="line">	&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<p>上线代码只是我在 <a href="http://www.jb51.net/article/95835.htm" target="_blank" rel="noopener">脚本之家</a> 看见的一段代码,上面还有很多实现复制的方法,这些方法如果只是用在PC端那么已经够了,如果要使用在移动端, Android高版本没有任何问题,但是IOS不管是什么版本都无法实现复制</p>
<h2 id="clipboard-js实现复制"><a href="#clipboard-js实现复制" class="headerlink" title="clipboard.js实现复制"></a>clipboard.js实现复制</h2><h4 id="为什么要是用clipboard-js"><a href="#为什么要是用clipboard-js" class="headerlink" title="为什么要是用clipboard.js"></a>为什么要是用clipboard.js</h4><p>复制文本到剪切板并不难, 它不需要很多个步骤或者加载很多KB的代码来完成, 最重要的是, 它不应该依赖于Flash或者任何臃肿的框架, 这就是clipboard.js开发的目的</p>
<h4 id="install"><a href="#install" class="headerlink" title="install"></a>install</h4><p>你可以通过npm来获取它</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install clipboard --save</span><br></pre></td></tr></table></figure>
<p>如果你不用install, 可以<a href="https://github.com/zenorocha/clipboard.js/archive/master.zip" target="_blank" rel="noopener">下载一个ZIP文件</a></p>
<h4 id="创建"><a href="#创建" class="headerlink" title="创建"></a>创建</h4><p>首先将dist上面的js或者<a href="https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers" target="_blank" rel="noopener">第三方提供的文件</a>引入到网页中</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=&quot;dist/clipboard.min.js&quot;&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>
<p>然后需要通过传递DOM选择器,HTML元素或者HTML列表来实例化它</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">new Clipboard(&apos;.btn&apos;);</span><br></pre></td></tr></table></figure>
<p>在内部我们需要获取与你选择器所匹配的元素,并为每个元素添加监听器,但是有一个问题,如果你有数百个匹配项, 那这个方法会消耗大量的内存.</p>
<p>基于这个问题, 我们可以用<a href="https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation" target="_blank" rel="noopener">事件代理</a>, 它只用一个监听器来代替多个监听器</p>
<h4 id="用法"><a href="#用法" class="headerlink" title="用法"></a>用法</h4><p>我们可以利用<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes" target="_blank" rel="noopener">HTML自定义属性</a>来提高代码的可用性<br>一个非常常用的列子就是点击某个按钮复制另一个元素的内容,你可以通过 <code>data-clipboard-target</code><br>自定义属性来实现</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">	&lt;meta charset=&quot;utf-8&quot;&gt;</span><br><span class="line">	&lt;title&gt;main&lt;/title&gt;</span><br><span class="line">	&lt;script src=&quot;dist/clipboard.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;input id=&quot;foo&quot; value=&quot;https://github.com/zenorocha/clipboard.js.git&quot;&gt;</span><br><span class="line">	&lt;!-- Trigger --&gt;</span><br><span class="line">	&lt;button class=&quot;btn&quot; data-clipboard-target=&quot;#foo&quot;&gt;</span><br><span class="line">	    &lt;img src=&quot;assets/clippy.svg&quot; alt=&quot;Copy to clipboard&quot;&gt;</span><br><span class="line">	&lt;/button&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;script type=&quot;text/javascript&quot;&gt;</span><br><span class="line">	new Clipboard(&apos;.btn&apos;);</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<p><strong>从一个元素中剪切文本</strong></p>
<p>你可以定义一个属性<code>data-clipboard-action</code>来指定是要<code>copy</code>还是<code>cut</code>, 如果省略这个属性,会默认设置<code>copy</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">	&lt;meta charset=&quot;utf-8&quot;&gt;</span><br><span class="line">	&lt;title&gt;main&lt;/title&gt;</span><br><span class="line">	&lt;script src=&quot;dist/clipboard.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;!-- Target --&gt;</span><br><span class="line">	&lt;textarea id=&quot;bar&quot;&gt;Mussum ipsum cacilds...&lt;/textarea&gt;</span><br><span class="line">	&lt;!-- Trigger --&gt;</span><br><span class="line">	&lt;button class=&quot;btn&quot; data-clipboard-action=&quot;cut&quot; data-clipboard-target=&quot;#bar&quot;&gt;</span><br><span class="line">	    Cut to clipboard</span><br><span class="line">	&lt;/button&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;script type=&quot;text/javascript&quot;&gt;</span><br><span class="line">	new Clipboard(&apos;.btn&apos;);</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<p>正如你所想的一样,这个cut属性只适用于<code>&lt;input /&gt;</code>和<code>&lt;textarea&gt;&lt;/textarea&gt;</code>元素</p>
<p><strong>从属性复制文本</strong></p>
<p>事实上你不需要其他元素来复制它的内容,你可以再出发元素上包含一个 <code>data-clipboard-text</code>属性</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">	&lt;meta charset=&quot;utf-8&quot;&gt;</span><br><span class="line">	&lt;title&gt;main&lt;/title&gt;</span><br><span class="line">	&lt;script src=&quot;dist/clipboard.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;!-- Trigger --&gt;</span><br><span class="line">	&lt;button class=&quot;btn&quot; data-clipboard-text=&quot;Just because you can doesn&apos;t mean you should — clipboard.js&quot;&gt;</span><br><span class="line">	    Copy to clipboard</span><br><span class="line">	&lt;/button&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;script type=&quot;text/javascript&quot;&gt;</span><br><span class="line">	new Clipboard(&apos;.btn&apos;);</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<p>####事件<br>在实际开发用,你需要显示一些用户反馈,不如复制/剪切成功这样的提示语,这就是我们为什么要写一些事件,比如<code>success</code>和<code>error</code>一起来实现你的定制逻辑</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">&lt;!DOCTYPE html&gt;</span><br><span class="line">&lt;html&gt;</span><br><span class="line">&lt;head&gt;</span><br><span class="line">	&lt;meta charset=&quot;utf-8&quot;&gt;</span><br><span class="line">	&lt;title&gt;main&lt;/title&gt;</span><br><span class="line">	&lt;script src=&quot;dist/clipboard.min.js&quot;&gt;&lt;/script&gt;</span><br><span class="line">&lt;/head&gt;</span><br><span class="line">&lt;body&gt;</span><br><span class="line">	&lt;!-- Trigger --&gt;</span><br><span class="line">	&lt;button class=&quot;btn&quot; data-clipboard-text=&quot;Just because you can doesn&apos;t mean you should — clipboard.js&quot;&gt;</span><br><span class="line">	    Copy to clipboard</span><br><span class="line">	&lt;/button&gt;</span><br><span class="line">&lt;/body&gt;</span><br><span class="line">&lt;script type=&quot;text/javascript&quot;&gt;</span><br><span class="line">	var clipboard = new Clipboard(&apos;.btn&apos;);</span><br><span class="line"></span><br><span class="line">	clipboard.on(&apos;success&apos;, function(e) &#123;</span><br><span class="line">	    console.info(&apos;Action:&apos;, e.action);</span><br><span class="line">	    console.info(&apos;Text:&apos;, e.text);</span><br><span class="line">	    console.info(&apos;Trigger:&apos;, e.trigger);</span><br><span class="line"></span><br><span class="line">	    e.clearSelection();</span><br><span class="line">	&#125;);</span><br><span class="line"></span><br><span class="line">	clipboard.on(&apos;error&apos;, function(e) &#123;</span><br><span class="line">	    console.error(&apos;Action:&apos;, e.action);</span><br><span class="line">	    console.error(&apos;Trigger:&apos;, e.trigger);</span><br><span class="line">	&#125;);</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">&lt;/html&gt;</span><br></pre></td></tr></table></figure>
<h4 id="高级用法"><a href="#高级用法" class="headerlink" title="高级用法"></a>高级用法</h4><p>如果你不想修改你的HTML,那么你可以使用一个非常方便的API, 所有你要做的一些事情都包含在一个function中, 在和这个函数中写你的逻辑,并且返回一个值</p>
<p>列如你需要动态设置一个target,你需要返回一个节点</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">new Clipboard(&apos;.btn&apos;, &#123;</span><br><span class="line">    target: function(trigger) &#123;</span><br><span class="line">        return trigger.nextElementSibling;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>如果你想动态设置一个text,你需要返回一个字符串</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">new Clipboard(&apos;.btn&apos;, &#123;</span><br><span class="line">    text: function(trigger) &#123;</span><br><span class="line">        return trigger.getAttribute(&apos;aria-label&apos;);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>为了在Bootstrap Modals或任何其他更改焦点的库中使用，您需要将聚焦的元素设置为container值</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">new Clipboard(&apos;.btn&apos;, &#123;</span><br><span class="line">    container: document.getElementById(&apos;modal&apos;)</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>另外，如果您正在使用单页面应用程序，则可能需要更精确地管理DOM的生命周期。以下是清理我们创建的事件和对象的方法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var clipboard = new Clipboard(&apos;.btn&apos;);</span><br><span class="line">clipboard.destroy();</span><br></pre></td></tr></table></figure>
<p>####浏览器支持<br>这个库依赖于<code>Selection</code>和<code>execCommand</code> API,第一个支持所有浏览器，第二个支持以下浏览器</p>
<table>
<thead>
<tr>
<th>chrome</th>
<th style="text-align:center">edg</th>
<th>firefox</th>
<th>IE</th>
<th>Opera</th>
<th style="text-align:right">Safari</th>
</tr>
</thead>
<tbody>
<tr>
<td>42+</td>
<td style="text-align:center">12+</td>
<td>41+</td>
<td>9+</td>
<td>29+</td>
<td style="text-align:right">10+</td>
</tr>
</tbody>
</table>
<p>如果你需要兼容低版本的浏览器 <code>clipboard .js</code>会优雅降级</p>
<p>你所要做的就是显示一个工具提示，说明<code>Copied</code>何时<code>success</code>调用事件，以及<code>Press Ctrl+C to copy</code>何时<code>error</code>调用事件，因为文本已经被选中</p>
<p>您还可以通过运行来检查是否支持<code>clipboard.js</code> <code>Clipboard.isSupported()</code>，这样您就可以隐藏UI中的复制/剪切按钮</p>
<h4 id="参考链接"><a href="#参考链接" class="headerlink" title="参考链接"></a>参考链接</h4><p><a href="https://clipboardjs.com/" target="_blank" rel="noopener">官网地址</a></p>
<p><a href="https://github.com/zenorocha/clipboard.js/" target="_blank" rel="noopener">github地址</a></p>
  
	</div>
		<footer class="article-footer clearfix">
<div class="article-catetags">


</div>



	<div class="article-share" id="share">
	
	  <div data-url="http://yoursite.com/2018/01/15/clipboard/" data-title="clipboard.js | Dreams are the power of change" data-tsina="" class="share clearfix">
	  </div>
	
	</div>


</footer>

   	       
	</article>
	
<nav class="article-nav clearfix">
 

<div class="next">
<a href="/2018/01/14/first/"  title="博客系统">
 <strong>下一篇：</strong><br/> 
 <span>博客系统
</span>
</a>
</div>

</nav>

	



</div>  
      <div class="openaside"><a class="navbutton" href="#" title="Show Sidebar"></a></div>

  <div id="toc" class="toc-aside">
  <strong class="toc-title">Contents</strong>
 
 <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#原生js实现复制"><span class="toc-number">1.</span> <span class="toc-text">原生js实现复制</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#clipboard-js实现复制"><span class="toc-number">2.</span> <span class="toc-text">clipboard.js实现复制</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#为什么要是用clipboard-js"><span class="toc-number">2.0.1.</span> <span class="toc-text">为什么要是用clipboard.js</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#install"><span class="toc-number">2.0.2.</span> <span class="toc-text">install</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#创建"><span class="toc-number">2.0.3.</span> <span class="toc-text">创建</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#用法"><span class="toc-number">2.0.4.</span> <span class="toc-text">用法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#高级用法"><span class="toc-number">2.0.5.</span> <span class="toc-text">高级用法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#参考链接"><span class="toc-number">2.0.6.</span> <span class="toc-text">参考链接</span></a></li></ol></li></ol></li></ol>
 
  </div>

<div id="asidepart">
<div class="closeaside"><a class="closebutton" href="#" title="Hide Sidebar"></a></div>
<aside class="clearfix">

  


  

  

  <div class="linkslist">
  <p class="asidetitle">Links</p>
    <ul>
        
          <li>
            
            	<a href="https://coderq.com" target="_blank" title="一个面向程序员交流分享的新一代社区">码农圈</a>
            
          </li>
        
          <li>
            
            	<a href="http://wuchong.me" target="_blank" title="Jark&#39;s Blog">Jark&#39;s Blog</a>
            
          </li>
        
    </ul>
</div>

  


  <div class="rsspart">
	<a href="/atom.xml" target="_blank" title="rss">RSS</a>
</div>

  <div class="weiboshow">
  <p class="asidetitle">Weibo</p>
    <iframe width="100%" height="119" class="share_self"  frameborder="0" scrolling="no" src="http://widget.weibo.com/weiboshow/index.php?language=&width=0&height=119&fansRow=2&ptype=1&speed=0&skin=9&isTitle=1&noborder=1&isWeibo=0&isFans=0&uid=&verifier=b3593ceb&dpc=1"></iframe>
</div>


</aside>
</div>
    </div>
    <footer><div id="footer" >
	
	<div class="line">
		<span></span>
		<div class="author"></div>
	</div>
	
	
	<section class="info">
		<p> Hello ,I&#39;m Larry Page in Google. <br/>
			This is my blog,believe it or not.</p>
	</section>
	 
	<div class="social-font" class="clearfix">
		
		<a href="http://weibo.com/2176287895" target="_blank" class="icon-weibo" title="微博"></a>
		
		
		
		
		
		
		
		
		
		
	</div>
			
		

		<p class="copyright">
		Powered by <a href="http://hexo.io" target="_blank" title="hexo">hexo</a> and Theme by <a href="https://github.com/wuchong/jacman" target="_blank" title="Jacman">Jacman</a> © 2018 
		
		<a href="/about" target="_blank" title="John Doe">John Doe</a>
		
		
		</p>
</div>
</footer>
    <script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/jquery.imagesloaded.min.js"></script>
<script src="/js/gallery.js"></script>
<script src="/js/jquery.qrcode-0.12.0.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){ 
  $('.navbar').click(function(){
    $('header nav').toggleClass('shownav');
  });
  var myWidth = 0;
  function getSize(){
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth) {
      myWidth = document.documentElement.clientWidth;
    };
  };
  var m = $('#main'),
      a = $('#asidepart'),
      c = $('.closeaside'),
      o = $('.openaside');
  c.click(function(){
    a.addClass('fadeOut').css('display', 'none');
    o.css('display', 'block').addClass('fadeIn');
    m.addClass('moveMain');
  });
  o.click(function(){
    o.css('display', 'none').removeClass('beforeFadeIn');
    a.css('display', 'block').removeClass('fadeOut').addClass('fadeIn');      
    m.removeClass('moveMain');
  });
  $(window).scroll(function(){
    o.css("top",Math.max(80,260-$(this).scrollTop()));
  });
  
  $(window).resize(function(){
    getSize(); 
    if (myWidth >= 1024) {
      $('header nav').removeClass('shownav');
    }else{
      m.removeClass('moveMain');
      a.css('display', 'block').removeClass('fadeOut');
      o.css('display', 'none');
      
      $('#toc.toc-aside').css('display', 'none');
        
    }
  });
});
</script>

<script type="text/javascript">
$(document).ready(function(){ 
  var ai = $('.article-content>iframe'),
      ae = $('.article-content>embed'),
      t  = $('#toc'),
      ta = $('#toc.toc-aside'),
      o  = $('.openaside'),
      c  = $('.closeaside');
  if(ai.length>0){
    ai.wrap('<div class="video-container" />');
  };
  if(ae.length>0){
   ae.wrap('<div class="video-container" />');
  };
  c.click(function(){
    ta.css('display', 'block').addClass('fadeIn');
  });
  o.click(function(){
    ta.css('display', 'none');
  });
  $(window).scroll(function(){
    ta.css("top",Math.max(140,320-$(this).scrollTop()));
  });
});
</script>


<script type="text/javascript">
$(document).ready(function(){ 
  var $this = $('.share'),
      url = $this.attr('data-url'),
      encodedUrl = encodeURIComponent(url),
      title = $this.attr('data-title'),
      tsina = $this.attr('data-tsina'),
      description = $this.attr('description');
  var html = [
  '<div class="hoverqrcode clearfix"></div>',
  '<a class="overlay" id="qrcode"></a>',
  '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
  '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
  '<a href="#qrcode" class="article-share-qrcode" title="微信"></a>',
  '<a href="http://widget.renren.com/dialog/share?resourceUrl=' + encodedUrl + '&srcUrl=' + encodedUrl + '&title=' + title +'" class="article-share-renren" target="_blank" title="人人"></a>',
  '<a href="http://service.weibo.com/share/share.php?title='+title+'&url='+encodedUrl +'&ralateUid='+ tsina +'&searchPic=true&style=number' +'" class="article-share-weibo" target="_blank" title="微博"></a>',
  '<span title="Share to"></span>'
  ].join('');
  $this.append(html);

  $('.hoverqrcode').hide();

  var myWidth = 0;
  function updatehoverqrcode(){
    if( typeof( window.innerWidth ) == 'number' ) {
      myWidth = window.innerWidth;
    } else if( document.documentElement && document.documentElement.clientWidth) {
      myWidth = document.documentElement.clientWidth;
    };
    var qrsize = myWidth > 1024 ? 200:100;
    var options = {render: 'image', size: qrsize, fill: '#2ca6cb', text: url, radius: 0.5, quiet: 1};
    var p = $('.article-share-qrcode').position();
    $('.hoverqrcode').empty().css('width', qrsize).css('height', qrsize)
                          .css('left', p.left-qrsize/2+20).css('top', p.top-qrsize-10)
                          .qrcode(options);
  };
  $(window).resize(function(){
    $('.hoverqrcode').hide();
  });
  $('.article-share-qrcode').click(function(){
    updatehoverqrcode();
    $('.hoverqrcode').toggle();
  });
  $('.article-share-qrcode').hover(function(){}, function(){
      $('.hoverqrcode').hide();
  });
});   
</script>











<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" media="screen" type="text/css">
<script src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
  $('.article-content').each(function(i){
    $(this).find('img').each(function(){
      if ($(this).parent().hasClass('fancybox')) return;
      var alt = this.alt;
      if (alt) $(this).after('<span class="caption">' + alt + '</span>');
      $(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>');
    });
    $(this).find('.fancybox').each(function(){
      $(this).attr('rel', 'article' + i);
    });
  });
  if($.fancybox){
    $('.fancybox').fancybox();
  }
}); 
</script>



<!-- Analytics Begin -->



<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?e6d1f421bbc9962127a50488f9ed37d1";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>



<!-- Analytics End -->

<!-- Totop Begin -->

	<div id="totop">
	<a title="Back to Top"><img src="/img/scrollup.png"/></a>
	</div>
	<script src="/js/totop.js"></script>

<!-- Totop End -->

<!-- MathJax Begin -->
<!-- mathjax config similar to math.stackexchange -->


<!-- MathJax End -->

<!-- Tiny_search Begin -->

<!-- Tiny_search End -->

  </body>
</html>
